<script setup>
import { onMounted, reactive, ref } from 'vue';
import EchartsBox from "@/components/Echarts/index.vue";

import useChart from "./useChart";
const { chartOptionsLine, chartOptionsLine2, initChartLine, initChartLine2 } = useChart();

const text = ref('');

const list = ref([]);


class Stat {

    constructor(_base,) {
        this.base = _base;
    }

    calculateWithCurrentLevel(_level) {
        var finalStat = ((Number(this.base) + _level * Number(increase.value)) * (Number(percent.value) * _level + 1 + .2)).toFixed(2);

        return finalStat;
    }
}


// click method 计算数值
function calculateWithTargetLevel(_targetLevel) {
    list.value = [];
    for (let i = 0; i < Number(_targetLevel); i++) {
        list.value.push(new Stat(base.value).calculateWithCurrentLevel(i));
    }

    initChartLine(targetLevel.value, list.value);
}

// 计算经验
function calculateExperience(_level) {
    let xp = 0;

    var fa = 15;  // 提高
    var xa = .95;
    var fb = 10;
    var xb = 1.04;
    var kLinear = 4;  // 提高
    var kbase = 0;    // 提高

    xp = (fa * Math.pow(xa, _level) + fb * Math.pow(xb, _level) + kLinear) * _level + kbase;
    return xp;
}

function calcuXPLine() {
    var total = 0;
    var list = [];
    for (let i = 0; i < 101; i++) {
        list.push(calculateExperience(i));
        total += list[i];
    }

    console.log(list);
    console.log(total);


    initChartLine2(101, list);
}

// 基础数值
const base = ref(0);

// 每次升级都增加的数值
const increase = ref(0);

// 直接添加的数值 吃百分比加成
const addBase = ref(0);



// 每次升级都增加的百分比 慎用
const percent = ref(0);

// 直接添加的百分比
const addPercent = ref(0);


const targetLevel = ref(80);




onMounted(() => {
    calcuXPLine();
})


</script>
<template>

    <div class="w-full h-full flex">

        <div class="w-400px h-full">
            <div class="w-400px bg-blue color-white flex flex-col p-x-20px p-y10px mb-10px">
                <div class="w-300px h-20px flex mb-10px">
                    <div class="w-150px">基本数值</div>
                    <input class="w-100px" type="text" v-model="base" />
                </div>
                <div class="w-400px h-20px flex  mb-10px">
                    <div class="w-250px">直接增加的数值（吃百分比加成）</div>
                    <input class="w-100px" type="text" v-model="addBase" />
                </div>
                <div class="w-300px h-20px flex  mb-10px">
                    <div class="w-150px">每次升级数值</div>
                    <input class="w-100px" type="text" v-model="increase" />
                </div>
                <div class="w-300px h-20px flex  mb-10px">
                    <div class="w-150px">每次升级百分数</div>
                    <input class="w-100px" type="text" v-model="percent" />
                </div>
                <div class="w-300px h-20px flex  mb-10px">
                    <div class="w-150px">直接添加的百分比</div>
                    <input class="w-100px" type="text" v-model="addPercent" />
                </div>

                <div class="w-300px h-20px flex  mb-10px">
                    <div class="w-150px">目标等级</div>
                    <input class="w-100px" type="text" v-model="targetLevel" />
                </div>

            </div>

            <div @click="calculateWithTargetLevel(targetLevel)"
                class=" mb-10px w-200px h-40px flex justify-center hover:bg-gray-800 items-center border-rd-10px select-none bg-black color-white cursor-pointer">
                计算数值
            </div>
            <div class="w-380px h-600px bg-white flex flex-col overflow-y-auto overflow-x-hidden">
                <div class="w-200px h-20px" v-for="(item, index) in list" :key="index">{{ item }}</div>
            </div>

        </div>

        <div class="flex-1 h-full flex flex-col">

            <div class="w-full h-400px bg-white border-test mb-20px">

                <EchartsBox :options="chartOptionsLine" />
            </div>
            <div class="w-full h-400px bg-white border-test">

                <EchartsBox :options="chartOptionsLine2" />
            </div>
        </div>

    </div>


</template>
<style lang="scss" scoped></style>